<template>
  <view class="center">
    <div class="topCard">
      <div class="Title">
        <div class="backIcon" @click="backHome">
          <IconFont name="rect-left" color="#342e2c" size="18"></IconFont>
        </div>
        <div class="TitleText">选择起终点</div>
        <div class="titleRight"></div>
      </div>
      <div class="addressList">
        <div class="startAddress">
          <div class="cityAddress">
            <div class="Drop"></div>
            <div class="Text">乌鲁木齐</div>
            <IconFont
              name="triangle-down"
              color="#6b6b83"
              size="11"
              style="margin-right: 2px"
            ></IconFont>
          </div>
          <div class="InputAddress">
            <input
              type="text"
              class="inputAddressText"
              v-model="addressList.start.address"
              @focus="showIconToClean('start')"
              placeholder="请选择市内上车点"
              v-on:input="inputTrigger('start')"
            />
            <IconFont
              v-show="addressList.start.iconShow"
              @click="clearAddress('start')"
              name="circle-close"
              color="#6b6b83"
              size="13"
              style="margin-right: 10px"
            ></IconFont>
          </div>
        </div>
        <!-- one -->
        <div class="targetAddress" v-show="addressList.first.show">
          <div class="cityAddress">
            <div class="xDrop" @click="killAddress('first')">×</div>
            <div class="Text">乌鲁木齐</div>
            <IconFont
              name="triangle-down"
              color="#6b6b83"
              size="11"
              style="margin-right: 2px"
            ></IconFont>
          </div>
          <div class="InputAddress">
            <input
              type="text"
              class="inputAddressText"
              v-model="addressList.first.address"
              placeholder="请输入第一目的地"
              @focus="showIconToClean('first')"
              v-on:input="inputTrigger('first')"
            />
            <IconFont
              v-show="addressList.first.iconShow"
              @click="clearAddress('first')"
              name="circle-close"
              color="#6b6b83"
              size="13"
              style="margin-right: 10px"
            ></IconFont>
          </div>
        </div>
        <!-- tow -->
        <div class="targetAddress" v-show="addressList.second.show">
          <div class="cityAddress">
            <div class="xDrop" @click="killAddress('second')">×</div>
            <div class="Text">乌鲁木齐</div>
            <IconFont
              name="triangle-down"
              color="#6b6b83"
              size="11"
              style="margin-right: 2px"
            ></IconFont>
          </div>
          <div class="InputAddress">
            <input
              type="text"
              class="inputAddressText"
              v-model="addressList.second.address"
              placeholder="请输入第二目的地"
              @focus="showIconToClean('second')"
              v-on:input="inputTrigger('second')"
            />
            <IconFont
              v-show="addressList.second.iconShow"
              @click="clearAddress('second')"
              name="circle-close"
              color="#6b6b83"
              size="13"
              style="margin-right: 10px"
            ></IconFont>
          </div>
        </div>
        <!-- end -->
        <div class="targetAddress">
          <div class="cityAddress">
            <div class="endDrop"></div>
            <div class="Text">乌鲁木齐</div>
            <IconFont
              name="triangle-down"
              color="#6b6b83"
              size="11"
              style="margin-right: 2px"
            ></IconFont>
          </div>
          <div class="InputAddress">
            <input
              type="text"
              class="inputAddressText"
              v-model="addressList.end.address"
              placeholder="请输入市内下车点"
              @focus="showIconToClean('end')"
              v-on:input="inputTrigger('end')"
            />
            <IconFont
              v-show="addressList.end.iconShow"
              @click="clearAddress('end')"
              name="circle-close"
              color="#6b6b83"
              size="13"
              style="margin-right: 10px"
            ></IconFont>
          </div>
        </div>
        <div class="addNextDrop">
          <div class="addIcon">
            <div class="addIconText" @click="showNextAddress">+ 途径点</div>
            <div class="addText">
              还可以添加<span>{{ addressNum }}</span
              >个
            </div>
          </div>
          <div
            class="complete"
            @click="toSettlement"
            v-show="
              addressList.end.address.length > 0 &&
              addressList.start.address.length > 0
            "
          >
            完成
          </div>
        </div>
      </div>
    </div>
    <IconFont
      name="loading"
      color="#6b6b83"
      size="20"
      v-show="loadingList"
    ></IconFont>

    <div class="selectAddressList">
      <div
        v-for="item in selectAddressList"
        :key="item.id"
        class="listCard"
        @click="selectThisAddress(item)"
      >
        <div class="left">
          <IconFont name="location2" color="#6b6b83" size="20"></IconFont>
        </div>
        <div class="right">
          <div class="topTitle">{{ item.name }}</div>
          <div class="bottomAddress">{{ item.district }}{{ item.address }}</div>
        </div>
      </div>
    </div>
    <div
      class="floatCard"
      @click="toMapSelect"
      v-show="selectAddressList.length > 0"
    >
      <div class="image">
        <image :src="mapIcon"></image>
      </div>
      <div class="text">地图选址</div>
    </div>
  </view>
</template>
<script lang="js" setup>
import { ref, onMounted, defineProps, defineEmits, watch, nextTick } from 'vue'
import Taro, { eventCenter, getCurrentInstance, useDidShow } from '@tarojs/taro'
import mapIcon from '../../svgs/mapIcon.svg'
import { IconFont } from '@nutui/icons-vue-taro';
const addressNum = ref(2)
const loadingList = ref(false)
const addressList = ref(
  {
    start: {
      show: true,
      address: '',
      iconShow: false,
      location: '',
    },
    first: {
      show: false,
      address: '',
      iconShow: false,
      location: '',
    },
    second: {
      show: false,
      address: '',
      iconShow: false,
      location: '',
    },
    end: {
      show: true,
      address: '',
      iconShow: false,
      location: '',
    }
  }
)
const selectInput = ref('')
const selectAddressList = ref([])
// 输入框事件
let timer = null; // 定义一个全局的定时器对象变量
useDidShow(() => {
  if (Taro.getCurrentInstance().preloadData?.addressList) {
    // 存在我想要的值
    setTimeout(() => {
      addressList.value = Taro.getCurrentInstance().preloadData.addressList
    }, 500);
  }
})
function inputTrigger(inputType) {
  clearTimeout(timer); // 清除上一个定时器
  timer = setTimeout(function () {
    // getAddressByGd(addressList.value[inputType].address)
    GenerateFakeData()
  }, 1000);
}



function showNextAddress() {
  // 检查第一个途径点是否显示
  if (!addressList.value.first.show) {
    // 显示第一个途径点
    addressList.value.first.show = true;
    // 地址数量减1
    addressNum.value -= 1;
  } else if (addressList.value.first.show && !addressList.value.second.show) {
    // 显示第二个途径点
    addressList.value.second.show = true;
    // 地址数量减1
    addressNum.value -= 1;
  }
}
// 杀死地址函数
function killAddress(type) {
  // 获取地址列表中的第一个和第二个地址
  const { first, second } = addressList.value;
  // 更新第二个地址
  const updateSecondAddress = () => {
    second.address = '';
    second.show = false;
  };
  const updateFirstAddress = () => {
    first.address = '';
    first.show = false;
  };
  // 如果是第一个地址
  if (type === 'first') {
    // 如果第二个地址不为空
    if (second.address.length > 0) {
      // 解析第二个地址
      const parsedAddress = JSON.parse(second.address);
      // 更新第一个地址
      first.address = JSON.stringify(parsedAddress);
      // 更新第二个地址
      updateSecondAddress();
    } else {
      // 更新第一个地址
      updateFirstAddress();
    }
  } else {
    // 更新第二个地址
    updateSecondAddress();
  }
  addressNum.value += 1;
}

// 假设常量已经定义在合适的作用域中
const START = 'start'; // 开始
const FIRST = 'first'; // 第一个
const SECOND = 'second'; // 第二个
const END = 'end'; // 结束
function showIconToClean(type) {
  selectInput.value = type

  if (addressList.value.start.address.length == 0 && type !== START) { // 如果开始地址为空且type不等于开始
    Taro.showToast({
      title: '请先选择上车地点', // 显示提示信息
      icon: 'none', // 图标为无
      duration: 2000 // 持续时间为2秒
    });
    addressList.value.start.iconShow = false // 开始地址图标隐藏
    addressList.value.first.iconShow = false // 第一个地址图标隐藏
    addressList.value.second.iconShow = false // 第二个地址图标隐藏
    addressList.value.end.iconShow = false // 结束地址图标隐藏
    return; // 返回
  }

  switch (type) {
    case START: // 如果type等于开始
      addressList.value.start.iconShow = true // 开始地址图标显示
      addressList.value.first.iconShow = false // 第一个地址图标隐藏
      addressList.value.second.iconShow = false // 第二个地址图标隐藏
      addressList.value.end.iconShow = false // 结束地址图标隐藏
      break; // 结束switch
    case FIRST: // 如果type等于第一个
      addressList.value.start.iconShow = false // 开始地址图标隐藏
      addressList.value.first.iconShow = true // 第一个地址图标显示
      addressList.value.second.iconShow = false // 第二个地址图标隐藏
      addressList.value.end.iconShow = false // 结束地址图标隐藏
      break; // 结束switch
    case SECOND: // 如果type等于第二个
      addressList.value.start.iconShow = false // 开始地址图标隐藏
      addressList.value.first.iconShow = false // 第一个地址图标隐藏
      addressList.value.second.iconShow = true // 第二个地址图标显示
      addressList.value.end.iconShow = false // 结束地址图标隐藏
      break; // 结束switch
    case END: // 如果type等于结束
      addressList.value.start.iconShow = false // 开始地址图标隐藏
      addressList.value.first.iconShow = false // 第一个地址图标隐藏
      addressList.value.second.iconShow = false // 第二个地址图标隐藏
      addressList.value.end.iconShow = true // 结束地址图标显示
      break; // 结束switch
    default: // 其他情况
      break; // 结束switch
  }
  selectAddressList.value = []
}
function clearAddress(type) {
  switch (type) {
    case 'start':
      addressList.value.start.address = ''
      break;
    case 'first':
      addressList.value.first.address = ''
      break;
    case 'second':
      addressList.value.second.address = ''
      break
    case 'end':
      addressList.value.end.address = ''
      break
    default:
      // 如果 expression 与上面的 value 值都不匹配，执行此处语句
      break;
  }
}
function GenerateFakeData() {
  selectAddressList.value = [{
    name: '测试1',
    address: '测试',
    location: '87.63,43.88'
  },
  {
    name: '测试2',
    address: '测试2',
    location: '87.68,43.83'
  },
  {
    name: '测试3',
    address: '测试2',
    location: '87.71,43.85'
  }, {
    name: '测试4',
    address: '测试2',
    location: '87.69,43.89'
  },
  ]
}
// 发起请求获取数据
// city后面根据定位获取吧 0991 乌鲁木齐
function getAddressByGd(keywords) {
  loadingList.value = true
  let parameters = {
    key: 'a2404e3055ad8b52ecfa83e0a1e7d1d9',
    keywords: keywords,
    city: '0991',
    citylimit: true
  }
  Taro.request({
    url: 'https://restapi.amap.com/v3/assistant/inputtips', //仅为示例，并非真实的接口地址
    data: parameters,
    method: 'GET',

    header: {
      'content-type': 'application/json' // 默认值
    },
    success: function (res) {
      if (res.data.tips.length > 0) {
        selectAddressList.value = res.data.tips
      } else {
        Taro.showToast({
          title: '没有找到相关地址',
          icon: 'none',
          duration: 2000
        })
        return
      }
      loadingList.value = false
    }
  })
}
//文字颜色替换
function textColorReplace(text, color) {

}

function selectThisAddress(data) {
  // 存放数据
  addressList.value[selectInput.value].address = data.name
  addressList.value[selectInput.value].location = data.location
}
//跳转结算
function toSettlement(){
  console.log(Taro.getCurrentInstance().preloadData)
  if(!Taro.getCurrentInstance().preloadData){
    Taro.preload({ addressList: addressList.value });
  }
  Taro.navigateTo({
    url: '/pages/settlement/index'
  })
}
function toMapSelect() {
  //存放一下数据参数
  Taro.preload({ addressList: addressList.value, selectInput: selectInput.value });

  Taro.navigateTo({
    url: '/pages/mapSelect/index'
  })

}
//返回上一级,有数据就处理,没有,就直接返回
function backHome() {
  Taro.navigateTo({
    url: '/pages/index/index'
  })
}
onMounted(() => { })
defineExpose({})
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
